From 09286cf96876a61f42dcef98385aeb277b2db7d2 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 21 Aug 2014 14:41:29 +0200 Subject: [PATCH] Adwaita: try to be nicer on performances with entry shadows --- gtk/resources/theme/Adwaita/_drawing.scss | 41 ++++++++++--------- .../theme/Adwaita/gtk-contained-dark.css | 26 ++++++------ gtk/resources/theme/Adwaita/gtk-contained.css | 26 ++++++------ 3 files changed, 47 insertions(+), 46 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index e3ced72e50..1ed62cc25b 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -34,38 +34,38 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on background-image: linear-gradient(to bottom, darken($base_color,3%), $base_color 90%); - // we need to match the same shadow types (inset/outset) in various states - // hence transparent shadows istead of resetting them when not needed - $_blank_inner_shadows: inset 0 2px 2px -2px - transparentize(mix(black, $base_color, 50%),1), - inset 0 0 2px 1px - transparentize(mix($fc,$base_color,20%),1); - $_blank_edge: if($noedge, none, 0 1px transparentize(white,1)); $_entry_edge: if($noedge, none, $widget_edge); + $_inner_shadows: inset 0 3px mix(black, $base_color, 3%), + inset 0 1px mix(black, $base_color, 18%); + @if $variant == 'dark' { + $_inner_shadows: inset 0 3px mix(black, $base_color, 20%), + inset 0 1px mix(black, $base_color, 35%); + } + + // we need to match the same shadow types (inset/outset) in various states + // hence transparent shadows istead of resetting them when not needed + $_blank_inner_shadows: inset 0 2px transparentize(mix(black, $base_color, 5%),1), + inset 0 1px transparentize(mix(black, $base_color, 18%),1); + $_focus_glow_color: if($variant=='light', transparentize($fc,0.85), + transparentize($fc,0.3)); @if $t==normal { border-color: $borders_color; - @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), - inset 0 0 2px 1px - transparentize(mix($fc,$base_color, 20%),1), + @include _shadows($_inner_shadows, + inset 0 0 0 1px transparentize($fc,1), $_entry_edge); // the second transparent shadow is needed for the transition to work } @if $t==focus { - @if $variant == 'light' { - border-color: $fc; - @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), - inset 0 0 2px 1px mix($fc,$base_color, 20%), - $_entry_edge); - } + @include _shadows($_inner_shadows, + inset 0 0 0 1px $_focus_glow_color, + $_entry_edge); + @if $variant == 'light' { border-color: $fc; } @else { border-color: if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); - @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), - inset 0 0 1px 1px $fc, - $_entry_edge); } } @if $t==insensitive { @@ -91,7 +91,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // buttons -@function _border_color ($c) { @return darken($c,25%); } // colored buttons want the border form the base color +@function _border_color ($c) { @return darken($c,25%); } // colored buttons want the + // border form the base color @function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { // diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index f175c1794b..4a81df2c56 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -150,7 +150,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); border-color: #1c1f1f; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); } .entry.image.left { padding-left: 0; } .entry.image.right { @@ -162,7 +162,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); border-color: #1c1f1f; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0); + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0); border: none; border-radius: 0; } .entry:focus { @@ -170,8 +170,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); - border-color: #0f2b48; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #215d9c, 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 1px rgba(238, 238, 236, 0.1); + border-color: #0f2b48; } .entry:insensitive { background-color: transparent; border-style: solid; @@ -180,7 +180,7 @@ color: #939695; border-color: #1c1f1f; background-image: linear-gradient(to bottom, #323636); - box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(238, 238, 236, 0.1); } .entry:backdrop { background-color: transparent; border-style: solid; @@ -189,7 +189,7 @@ color: #c9cbc9; border-color: #1e2222; background-image: linear-gradient(to bottom, #2c2c2c); - box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 0); } .entry:backdrop:insensitive { background-color: transparent; border-style: solid; @@ -198,7 +198,7 @@ color: #5d6767; border-color: #1e2222; background-image: linear-gradient(to bottom, #323636); - box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 0); } .entry:selected, .entry:backdrop:selected { background-color: #215d9c; color: white; } @@ -232,8 +232,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); - border-color: #1a0000; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #cc0000, 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(204, 0, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1); + border-color: #1a0000; } .entry.error:selected, .entry.error:selected:focus { background-color: #cc0000; } .entry.error:selected:focus { @@ -248,8 +248,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); - border-color: #432100; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #f57900, 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(245, 121, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1); + border-color: #432100; } .entry.warning:selected, .entry.warning:selected:focus { background-color: #f57900; } .entry.warning:selected:focus { @@ -2459,7 +2459,7 @@ GtkLevelBar.vertical { border-width: 1px; background-image: linear-gradient(to bottom, #212121, #292929 90%); border-color: #1c1f1f; - box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); } .level-bar.trough:backdrop { background-color: transparent; border-style: solid; @@ -2468,7 +2468,7 @@ GtkLevelBar.vertical { color: #c9cbc9; border-color: #1e2222; background-image: linear-gradient(to bottom, #2c2c2c); - box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 0); } .level-bar.fill-block { border-width: 1px; border-style: solid; diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 4203fcb5a0..35f1ccbdad 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -150,7 +150,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); border-color: #a1a1a1; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px white; } + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; } .entry.image.left { padding-left: 0; } .entry.image.right { @@ -162,7 +162,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); border-color: #a1a1a1; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0); + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0); border: none; border-radius: 0; } .entry:focus { @@ -170,8 +170,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); - border-color: #4a90d9; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #dae8f7, 0 1px white; } + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px white; + border-color: #4a90d9; } .entry:insensitive { background-color: transparent; border-style: solid; @@ -180,7 +180,7 @@ color: #8d9091; border-color: #a1a1a1; background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px white; } + box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px white; } .entry:backdrop { background-color: transparent; border-style: solid; @@ -189,7 +189,7 @@ color: #54595a; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #fcfcfc); - box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 255, 0); } .entry:backdrop:insensitive { background-color: transparent; border-style: solid; @@ -198,7 +198,7 @@ color: #c7c7c7; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 255, 0); } .entry:selected, .entry:backdrop:selected { background-color: #4a90d9; color: white; } @@ -232,8 +232,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); - border-color: #cc0000; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc, 0 1px white; } + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(204, 0, 0, 0.15), 0 1px white; + border-color: #cc0000; } .entry.error:selected, .entry.error:selected:focus { background-color: #cc0000; } .entry.warning { @@ -244,8 +244,8 @@ border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); - border-color: #f57900; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc, 0 1px white; } + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(245, 121, 0, 0.15), 0 1px white; + border-color: #f57900; } .entry.warning:selected, .entry.warning:selected:focus { background-color: #f57900; } .entry.image { @@ -2454,7 +2454,7 @@ GtkLevelBar.vertical { border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, white 90%); border-color: #a1a1a1; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px white; } + box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; } .level-bar.trough:backdrop { background-color: transparent; border-style: solid; @@ -2463,7 +2463,7 @@ GtkLevelBar.vertical { color: #54595a; border-color: #a8a8a8; background-image: linear-gradient(to bottom, #fcfcfc); - box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px rgba(255, 255, 255, 0); } + box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 255, 0); } .level-bar.fill-block { border-width: 1px; border-style: solid; -- 2.30.2